<template>
  <a-modal v-model:visible="props.showModal" title="产品反馈" width="560px" @Cancel="onClose">
    <div class="modal-container">
      <div class="tip-container">
        <div class="tip-item">
          <div class="step-container">
            01
          </div>
          <span>shein 复制商品链接</span>
        </div>
        <div class="tip-item">
          <div class="step-container">
            02
          </div>
          <span>黏贴商品链接</span>
        </div>
        <div class="tip-row-line"></div>
      </div>
      <div class="form-item">
        <span class="form-item-title">商品链接</span>
        <a-input v-model:value="params.productUrl" placeholder="请输入" />
      </div>
      <div class="form-item">
        <span class="form-item-title">添加附件（截图或视频）</span>
        <div class="imgs-list">
          <a-upload v-model:file-list="fileList" :showUploadList="false" :action="APIURL + 'fileUpload/file'"
            :headers="headers" @change="handleChange" name="files" multiple>
            <div class="upload-button">
              <plus-outlined style="font-size: 18px;" />
            </div>
          </a-upload>
          <img :src="item" v-for="(item, index) in params.files" :key="index" class="img-item">
        </div>
      </div>
    </div>
    <template #footer>
      <div class="g-modal-buttons">
        <div class="g-close-button" @click="onClose">
          取消
        </div>
        <div class="g-submit-button" @click="onSubmit">
          提交
        </div>
      </div>
    </template>
  </a-modal>
  <a-modal v-model:visible="showSuccess" title="添加客服微信" width="560px" :footer="null" @Cancel="showSuccess = false">
    <div class="success-container">
      <span class="success-content">关注申请进度</span>
      <div class="success-img-container">
        <img src="@i/Wechat.jpg" class="success-img">
      </div>
      <!-- <span class="success-tip">3 秒后返回页面</span> -->
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import { APIURL, IMGURL } from '@g/data'
import { PlusOutlined } from '@ant-design/icons-vue';
import {
  addProduct
} from '@r/api/assist'
import type { UploadChangeParam } from 'ant-design-vue';
const params = ref<any>({
  files: [],
  productUrl: ''
})
const emits = defineEmits<{
  (emitstr: 'onUpdata', emitData: {}): void
}>()
const headers = {
  token: localStorage.getItem('token')
}
const fileList = ref<string[]>([])
const showSuccess = ref<boolean>(false)
const props = withDefaults(
  defineProps<{
    showModal?: boolean;
  }>(),
  {
    showModal: false,
  }
);
function handleChange(info: UploadChangeParam) {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    console.log(info.file.response.content.files[0]);
    let url = info.file.response.content.files[0]
    message.success(`${info.file.name} 上传成功`);
    console.log(fileList.value);
    params.value.files = [...params.value.files, IMGURL + url]
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name}上传失败`);
  }
}
function onSubmit() {
  if (params.value.files.length < 1 && !params.value.productUrl) {
    message.warn('请输入您的反馈意见')
    return
  }
  addProduct(params.value)
    .then(res => {
      onClose()
      showSuccess.value = true
      // setTimeout(() => {
      //   showSuccess.value = false
      // }, 3000);
      // message.success('发送成功，请注意查收')
    })

}
function onClose() {
  props.showModal = false
  emits('onUpdata', {})
  // emits('onUpdata', {})
}
onMounted(() => {
})
</script>

<style scoped lang="less">
.modal-container {
  display: flex;
  flex-direction: column;

  .tip-container {
    width: 100%;
    height: 94px;
    border-radius: 10px;
    opacity: 1;
    background: #FDF6F2;
    box-sizing: border-box;
    border: 1px solid #FFEBDD;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0em;
    color: #775C4D;
    padding: 10px 79px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .tip-row-line {
      position: absolute;
      left: 20px;
      right: 0;
      top: 34px;
      margin: 0 auto;
      height: 2px;
      width: 225px;
      background: #F7B07C;
    }

    .tip-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #775C4D;
      font-size: 14px;

      .step-container {
        width: 30px;
        height: 30px;
        opacity: 1;
        border-radius: 30px;
        background: #F7B07C;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        font-size: 14px;
        margin-bottom: 8px;
      }
    }
  }

  .form-item {
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .form-item-title {
      /* 描述要反馈的内容 */
      font-size: 14px;
      font-weight: normal;
      line-height: 14px;
      letter-spacing: 0px;
      color: #666666;
      margin-bottom: 10px;
    }
  }

  .imgs-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 18px;

    .upload-button {
      width: 88px;
      height: 88px;
      border-radius: 4px;
      opacity: 1;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px dashed #DCDCDC;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .img-item {
      width: 88px;
      height: 88px;
      border-radius: 4px;
      opacity: 1;
      background: #FFFFFF;
      box-sizing: border-box;
      border: 1px solid #DCDCDC;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 320px;

  .success-img-container {
    padding: 20px;
    margin-top: 10px;
    border: 1px solid #EEEEEE;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
  }

  .success-img {
    height: 200px;
    width: 200px;
  }

  .success-content {
    // margin-top: 24px;
    color: #666666;
    font-size: 16px;
  }

  .success-tip {
    margin-top: 14px;
    color: #999;
    font-size: 14px;
  }
}
</style>